<template>
  <div class="d-relative pointer">
    <div
      ref="table"
      :style="{
        opacity,
        zIndex,
        transform: 'scale(' + scale + ')',
        transformOrigin
      }"
      class="d-absolute chart-table"
      @click="hiddenTable"
    >
      <a-table
        :scroll="{ y: 370 }"
        :pagination="false"
        :row-key="
          (record, index) => {
            return index
          }
        "
        :columns="columnsData"
        :data-source="tableData"
      />
    </div>

    <div :id="id" :style="{ height, padding }" />
  </div>
</template>
<script>
import { DualAxes } from '@antv/g2plot'
import mixins from './mixin'
const uvBillData = [
  { time: '2019-03', value: 1, type: 'uv' },
  { time: '2019-03', value: 3, type: 'bill' },
  { time: '2019-04', value: 4, type: 'uv' },
  { time: '2019-05', value: 5, type: 'uv' },
  { time: '2019-06', value: 6, type: 'uv' },
  { time: '2019-07', value: 7, type: 'uv' },
  { time: '2019-04', value: 5, type: 'bill' },
  { time: '2019-05', value: 4, type: 'bill' },
  { time: '2019-06', value: 3, type: 'bill' },
  { time: '2019-07', value: 2, type: 'bill' }
]

const transformData = [
  { time: '2019-03', count: 750, name: 'b' },
  { time: '2019-04', count: 650, name: 'b' },
  { time: '2019-05', count: 450, name: 'b' },
  { time: '2019-06', count: 400, name: 'b' },
  { time: '2019-07', count: 320, name: 'b' },
  { time: '2019-03', count: 900, name: 'c' },
  { time: '2019-04', count: 600, name: 'c' },
  { time: '2019-05', count: 450, name: 'c' },
  { time: '2019-06', count: 300, name: 'c' },
  { time: '2019-07', count: 200, name: 'c' }
]
export default {
  mixins: [mixins],
  props: {
    padding: {
      type: String,
      default: '12px'
    },
    height: {
      type: String,
      default: '400px'
    },
    transformOrigin: {
      type: String,
      default: 'top left'
    },
    datax: {
      type: Array,
      default: () => [...uvBillData]
    },
    datay: {
      type: Array,
      default: () => [...transformData]
    },
    x: {
      type: String,
      default: 'time'
    },
    y: {
      type: Array,
      default: () => ['value', 'count']
    },
    type: {
      type: Array,
      default: () => ['type', 'name']
    }
  },
  data() {
    return {
      stackedColumnPlot: null
    }
  },
  watch: {
    datax: {
      handler() {
        this.resetTable()
        this.reset()
      },
      deep: true
    },
    datay: {
      handler() {
        this.resetTable()
        this.reset()
      },
      deep: true
    }
  },
  mounted() {
    this.renderChart()
    this.$emit('hock:beforeDestroy', () => {
      this.stackedColumnPlot.destroy()
    })
  },
  methods: {
    resetTable() {
      this.columnsData = []
      this.tableData = []
      const data = [...this.datax, ...this.datay]
      const type = [
        ...new Set(
          data.map(_ => {
            return _[this.type[0]]
          })
        )
      ]
      type.forEach(t => {
        const obj = {}
        data.forEach((_, i) => {
          obj.序列 = t
          _[this.type[0]] === t && (obj[_[this.x]] = _[this.y[0]])
        })
        this.tableData.push(obj)
        console.log(this.tableData)
      })
      if (this.tableData[0]) {
        Object.keys(this.tableData[0]).forEach(_ => {
          this.columnsData.push({
            title: _,
            dataIndex: _,
            key: _
          })
        })
      }
    },
    renderChart() {
      this.stackedColumnPlot = new DualAxes(this.id, {
        data: [this.datax, this.datay],
        isGroup: true,
        height: this.height,
        downLoad: true,
        marginRatio: 0,
        title: '1',
        autoFit: true,
        xField: this.x,
        yField: this.y,
        yAxis: {
          title: {
            text: '222'
          }
        },
        xAxis: {
          nice: true,
          // tickCount: 8,
          // 文本标签
          label: {
            autoRotate: true,
            // rotate: Math.PI / 6,
            offset: 16,
            style: {
              fill: '#aaa',
              fontSize: 12
            },
            formatter: name => name
          }
        },
        legend: {
          position: 'bottom' // 'top', 'bottom', 'middle'
        },
        geometryOptions: [
          {
            geometry: 'column',
            isGroup: true,
            seriesField: this.type[0],
            columnWidthRatio: 0.4
          },
          {
            geometry: 'line',
            seriesField: this.type[1],
            lineStyle: ({ name }) => {
              return {
                opacity: 0.5
              }
            }
          }
        ]
      })
      this.stackedColumnPlot.on('click', ev => {
        if (
          ev.gEvent.target.cfg.name !== 'legend-item-name' &&
          ev.gEvent.target.cfg.name !== 'legend-item-marker'
        ) {
          this.showTable()
        }
        this.$emit('onClick', ev)
      })
      this.stackedColumnPlot.render()
    },
    reset() {
      this.$nextTick(() => {
        console.log(222)
        this.stackedColumnPlot.options.data = [this.datax, this.datay]
        this.stackedColumnPlot.render()
      })
    }
  }
}
</script>
<style scoped>
/deep/ .g2-tooltip-value {
  font-family: GaramondFont;
  font-size: 16px;
}
.chart-table {
  transition: all 1.5s;
  z-index: -1;
  transform: scle(0.4);
  height: 100%;
  background: #fff;
}
</style>
